<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局作业</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <header>
            <h1>
                Cemal Can Dinca
            </h1>
            <p>
                Owner/Designer/Creator
            </p>
            <a href="#">Contact Me</a>

            <div class="sige">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">

        </header>

        <section class="fate">
            <div class="first">
                <img class="one" src="https://via.placeholder.com/300x350" alt="">
                <h2>One Piece</h2>
                <p>Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.</p>
                <img ciass="two" src="https://via.placeholder.com/300x350" alt="">
                <h2>XiBalaoma</h2>
                <p>Lorem ipsum dolor sit amet. conctetur ellt. e. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor sit amet. conctetur ellt. </p>
            </div>
            <div class="second">
                <p class="size">Lorem ipsum dolor Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor
                    sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.
                </p>
                <p class="size">Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.
                </p>
                <p class="size">Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.
                </p>
                <div class="photo">
                    <img class="yi" src="https://via.placeholder.com/260x350" alt="">
                    <img class="er" src="https://via.placeholder.com/125x110" alt="">
                    <img class="san" src="https://via.placeholder.com/125x110" alt="">
                </div>
            </div>
        </section>





</html>